
<template>
  <div class="playlist-box">
    <div class="musicList">
      <div class="musicTop">
        <div class="title">推荐更多 ></div>
        <div class="more">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gengduo-shuxiang"></use>
          </svg>
        </div>
      </div>
      <div class="musicContent">
        <van-swipe :loop="false" :width="120" class="my-swipe" :show-indicators="false">
          <van-swipe-item>
            <van-swipe style="height: 190px;" vertical :autoplay="2000" :show-indicators="false">
              <van-swipe-item v-for="item in vplaylist" :key="item">
                <router-link :to="{ path: '/playlistDeatils', query: { id: item.id } }"><img :src="item.picUrl"
                    alt="" />
                  <span class="playCount">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-bofang1"></use>
                    </svg>
                    {{ changeCount(item.playCount) }}
                  </span>
                  <span class="name1">{{ item.name }}</span>
                </router-link>
              </van-swipe-item>
            </van-swipe>
          </van-swipe-item>
          <van-swipe-item v-for="item in playlist" :key="item">
            <router-link :to="{ path: '/playlistDeatils', query: { id: item.id } }"><img :src="item.picUrl" alt="" />
              <span class="playCount">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang1"></use>
                </svg>
                {{ changeCount(item.playCount) }}
              </span>
              <span class="name">{{ item.name }}</span>
            </router-link>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getplayList } from '@/api/banner';
const playlist = ref([])
const vplaylist = ref([])
onMounted(
  async () => {
    const res = await getplayList()
    playlist.value = res.result.slice(3, 9)
    vplaylist.value = res.result.slice(0, 3)
    console.log(res);



  }
)
const changeCount = (num) => {
  if (num >= 100000000) {
    return (num / 100000000).toFixed(1) + "亿";
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + "万";
  }

}
</script>
<style scoped lang="scss">
.playlist-box {
  margin-top: .24rem;
  width: 100%;
  height: 4.1rem;

  >.musicList {
    width: 100%;
    height: 4.1rem;
    padding: 0.2rem;

    .musicTop {
      width: 100%;
      height: .28rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;

      .title {
        font-size: .28rem;
        font-weight: 900;
      }

      .more>.icon {
        font-size: 14px;
        position: relative;
        right: .4rem;
      }

    }

    .musicContent {
      width: 100%;
      height: 3.78rem;
      font-size: .24rem;

      .van-swipe-item {
        //   margin-right: 0.14rem;
        padding-right: 0.2rem;
        position: relative;
        height: 3.8rem;

        img {
          width: 2.4rem;
          height: 2.4rem;
          border-radius: 0.2rem;
          //   position: absolute;
        }

        .playCount {
          position: absolute;
          z-index: 100;
          right: 0.3rem;
          color: white;
          margin-top: 0.06rem;

          .icon {
            width: 0.3rem;
            height: 0.3rem;
            fill: #fff;
          }

        }

        .name {
          color: var(--text);
          width: 2.4rem;
          height: .64rem;
          position: absolute;
          bottom: .6rem;
          left: 0;
        }

        .name1 {
          color: var(--text);
          width: 2.4rem;
          height: .64rem;
          font-size: .24rem;
          position: absolute;
          bottom: .6rem;
          left: 0;
        }
      }
    }
  }
}
</style>